<template>
	<widget-root :styles="styles">
		<view class="user-order" :style="{
		'background-color': styles.bg_color,
		'border-radius': `${$px2rpx(styles.border_radius_top)}rpx ${$px2rpx(styles.border_radius_top)}rpx ${$px2rpx(styles.border_radius_bottom)}rpx ${$px2rpx(styles.border_radius_bottom)}rpx`
	}">
			<view class="order-title flex row-between" :style="{
				'border-bottom-color': `${styles.divider_color}`
			}">
				<view class="flex order-title__left">
					<u-image width="32rpx" height="32rpx" :src="$getImageUri(content.icon)" />
					<text class="bold" style="margin-left: 22rpx;">{{ content.text }}</text>
				</view>
				<router-link to="/pages/order_list/order_list?mode=all">
					<view class="sm muted">全部订单<u-icon name="arrow-right"></u-icon>
					</view>
				</router-link>
			</view>
			<view class="order-nav flex">
				<view 
					class="nav-item" 
					v-for="item in contentData" 
					:key="item.name" 
					@click="jump(item)">
					<view class="flex-col col-center">
						<view class="badge-wrap">
							<u-image width="80rpx" height="80rpx" :src="$getImageUri(item.url)" />
							<u-badge v-if="userInfo[item.field]" type="error" :count="userInfo[item.field]"
								:offset="[-10, -20]"></u-badge>
						</view>
						<view class="xs m-t-12">{{ item.name }}</view>
					</view>
				</view>
			</view>
		</view>
	</widget-root>
</template>

<script type="text/javascript">
export default {
	props: {

		content: {
			type: [Object, Array]
		},
		styles: {
			type: [Object, Array]
		},
	},
	data() {
		return {

		}
	},
	computed: {
		contentData() {
			if (this.content && this.content.data && Array.isArray(this.content.data) && this.content.data.length) {
				return this.content.data
			}
			return [
				
			]
		}
	},
	methods: {
		jump(row) {
			console.log(row)
			const { link } = row
			if (!link || Array.isArray(link) || !link.path) {
				return
			}
			if (link.isTabBar) {
				return uni.switchTab({
					url: link.path
				})
			}
			uni.navigateTo({
				url: link.path
			})
		}
	},
	
};
</script>

<style lang="scss" scoped>
.user-order {
	.order-title {
		border-bottom: $-solid-border;
		padding: 24rpx 0;
		margin: 0 24rpx;
	}
	.order-title__left {
		justify-content: center;
	}

	.order-nav {
		padding: 26rpx 0;

		.nav-item {
			flex: 1;

			.badge-wrap {
				position: relative
			}
		}
		
	}
}
</style>
